(() => {
  let ele = {};
  ele.task = $("#task");
  ele.modal_shuoming = $("#modal-shuoming");
  ele.chahao2 = $("#chahao2");
  ele.btn_que3 = $("#btn_que3");
  ele.lists = $("#lists");
  ele.lists2 = $("#lists2");
  ele.lists3 = $("#lists3");
  ele.option_new = $("#option-new");
  ele.option_room = $("#option-room");
  ele.option_week = $("#option-week");
  ele.modal_sell = $("#modal-sell");
  ele.chahao3 = $("#chahao3");
  ele.jinbishou = $("#jinbishou");
  ele.jinbishous = $("#jinbishous");
  ele.chahao_xia = $("#chahao_xia");
  ele.btn_que_xia = $("#btn_que_xia");
  ele.btn_que4 = $("#btn_que4");
  ele.btn_que_dong = $("#btn_que_dong");
  ele.chahao_dong = $("#chahao_dong");
  ele.times = $("#times");
  ele.modal_shelf = $("#modal-shelf");
  ele.modal_freeze = $("#modal-freeze");
  ele.fangchan = $("#fangchan");
  let num = getCookie("sellNum") || 1;
  let list = ["", ""];
  let list2 = ["", ""];
  let list3 = [];
  let buNum = 100;
  // todo关闭玩法介绍
  ele.chahao2.onclick = () => {
    closeMdl(ele.modal_shuoming);
  };
  // todo关闭玩法介绍
  ele.btn_que3.onclick = () => {
    closeMdl(ele.modal_shuoming);
  };
  // todo点击tabbar切换可出售
  ele.option_new.onclick = () => {
    num = 1;
    setCookie("sellNum", 1);
    tabBarQie();
  };
  // todo点击tabbar切换出售中
  ele.option_room.onclick = () => {
    num = 2;
    setCookie("sellNum", 2);
    tabBarQie();
  };
  // todo点击tabbar切换冻结中
  ele.option_week.onclick = () => {
    num = 3;
    setCookie("sellNum", 3);
    tabBarQie();
  };
  // todo点击❌
  ele.chahao3.onclick = () => {
    closeMdl(ele.modal_sell);
  };
  // todo点击❌下架
  ele.chahao_xia.onclick = () => {
    closeMdl(ele.modal_shelf);
  };
  // todo点击❌撤销冻结
  ele.chahao_dong.onclick = () => {
    closeMdl(ele.modal_freeze);
  };

  // todo判断num为几，就到几
  tabBarQie();
  function tabBarQie() {
    if (num == 1) {
      // ?对下面的按钮做显示隐藏处理
      ele.option_new.classList.add("option-active");
      ele.option_room.classList.remove("option-active");
      ele.option_week.classList.remove("option-active");
      // ?显示要显示的列表
      openMdl(ele.lists);
      closeMdl(ele.lists2);
      closeMdl(ele.lists3);
    } else if (num == 2) {
      // ?对下面的按钮做显示隐藏处理
      ele.option_room.classList.add("option-active");
      ele.option_new.classList.remove("option-active");
      ele.option_week.classList.remove("option-active");
      openMdl(ele.lists2);
      closeMdl(ele.lists);
      closeMdl(ele.lists3);
    } else {
      // ?对下面的按钮做显示隐藏处理
      ele.option_week.classList.add("option-active");
      ele.option_new.classList.remove("option-active");
      ele.option_room.classList.remove("option-active");
      openMdl(ele.lists3);
      closeMdl(ele.lists2);
      closeMdl(ele.lists);
    }
  }
  asyncList();
  function asyncList() {
    let token = getCookie("token");
    ajax({
      method: "get",
      url: API_PATH.SELLLIST,
      header: {
        Authorization: token,
      },
      success: (res) => {
        list = res.data.record;
        // 这个是冻结
        list3 = res.data.coldList;
        // 出售中列表
        list2 = res.data.list;
        // 调用函数
        initList();
      },
      error: (err) => {
        // openTips(err.msg);
      },
    });
  }
  // !渲染三个tabBat 界面------------------------------------------

  function initList() {
    let newList = list
      .map((item, index) => {
        return `<div class="list_son" >
        <div class="top_fang">
          <div class="img">
            <img src="${IMG_DOMAIN + item.house_info.logo}" alt="" />
          </div>
          <div class="right">
            <p class="t">
              <span id="fangName${index}">${
          item.house_info.name
        }</span> &nbsp;&nbsp;&nbsp;状态：<span class="${
          item.state == 0 ? "zhang" : "zhang"
        }">${item.state == 0 ? "正常" : "异常"}</span>
            </p>
            <p>当前豪华值：${item.real_house ? item.real_house.luxury : "0"}</p>
            <p>人数: <span>${item.zu_num}/${item.house_detail.zf_num}</span></p>
            <p id="fnagHao${index}">房产编号：${item.no}</p>
          </div>
        </div>
        <div class="jinbi">金币价格</div>
        <!-- 步进器 -->
        <div class="bujin">
          <img class="jian" data-ind="${index}" id="jian" src="http://img.qxgs.cc/tiantianlaishouzu/img/public/jian.png" alt="" />
          <input id="cendata${index}" data-ind="${index}"  class="center inpuCenter">
          <img class="jia" data-ind="${index}"  id="jia" src="http://img.qxgs.cc/tiantianlaishouzu/img/public/jia.png" alt="" />
        </div>
        <!-- 出售 -->
        <div class="chu" data-id="${
          item.id
        }" data-ind="${index}" id="chushou">上架出售</div>
      </div>`;
      })
      .join(" ");
    ele.lists.innerHTML = newList;
    if (list.length == 0) {
      ele.lists.innerHTML = `<div class="wen_wu">暂无房产出售<div/>`;
    }
    let index = null;
    // !步进器
    let jiaAll = document.querySelectorAll("#jia");
    let jianAll = document.querySelectorAll("#jian");
    let inpuCenterAll = document.querySelectorAll(".inpuCenter");
    inpuCenterAll.forEach((item) => {
      index = item.dataset.ind;
      item.value = 100;
      item.oninput = (e) => {
        item.value = e.target.value;
        buNum = Number(e.target.value);
      };
    });
    // !加操作

    jiaAll.forEach((item) => {
      item.onclick = (e) => {
        if (index != item.dataset.ind) {
          buNum = 100;
          if (index) {
            $(`#cendata${index}`).value = buNum;
          }
        }
        index = item.dataset.ind;
        buNum = buNum + 100;
        $(`#cendata${item.dataset.ind}`).value = buNum;
      };
    });
    // 减操作
    jianAll.forEach((item) => {
      item.onclick = (e) => {
        if (index != item.dataset.ind) {
          buNum = 100;
          if (index) {
            $(`#cendata${index}`).value = buNum;
          }
        }
        index = item.dataset.ind;
        if (buNum > 100) {
          buNum = buNum - 100;
          $(`#cendata${item.dataset.ind}`).value = buNum;
        } else {
          buNum = 100;
        }
      };
    });
    // !点击上架
    let chushouAll = document.querySelectorAll("#chushou");
    chushouAll.forEach((item) => {
      item.onclick = () => {
        let numText = $(`#cendata${item.dataset.ind}`).value;
        let numJinbi = $(`#fnagHao${item.dataset.ind}`).innerHTML;
        // 房产名字
        let fnagName = $(`#fangName${item.dataset.ind}`).innerHTML;
        console.log(numText, 000000);
        // 在这里调用出售接口
        fangchan.innerHTML = `您确认要把名下${fnagName}, ${numJinbi} 以
        <span id="jinbishou">${numText}金币</span> 的价格上架出售吗？`;
        openMdl(ele.modal_sell);
        // !点击确认出售
        ele.btn_que4.onclick = () => {
          // console.log(buNum,);
          sellAsync(item.dataset.id, buNum, item.dataset.ind);
        };
      };
    });
    // !这个是第二个tabBar的页面赋值---------------------------------------------------------------------
    let newList2 = list2
      .map((item, index) => {
        return `
        <div class="list_son">
        <div class="left">
          <div class="img">
            <img src="${IMG_DOMAIN + item.house_detail.logo}" alt="" />
          </div>
          <div class="cen">
            <p class="t">${item.house_detail.name}</p>
            <p>房产编号：${item.no}</p>
            <p>状态：<span>出售中</span></p>
          </div>
        </div>
        <div class="left_btn">
          <div class="t">
            <p class="time"><span  data-time="${
              item.over_time
            }" id="time2"></span>自动下架</p>
          </div>
          <div class="b">
            <div class="b_btn">
              <img src="http://img.qxgs.cc/tiantianlaishouzu/img/public/jinbi.png" alt="" /><span
                >${item.over_money}</span
              >
            </div>
            <div id="xiajia" data-bian="${item.no}" data-name="${
          item.house_detail.name
        }" data-id="${item.id}">下架</div>
          </div>
          <!-- <div class="c">点击获得</div> -->
        </div>
      </div>`;
      })
      .join(" ");
    ele.lists2.innerHTML = newList2;
    if (list2.length == 0) {
      ele.lists2.innerHTML = `<div class="wen_wu">暂无房产出售<div/>`;
    }
    // !点击下架
    let xiajiaAll = document.querySelectorAll("#xiajia");
    xiajiaAll.forEach((item) => {
      item.onclick = () => {
        // todo获取编号
        ele.jinbishous.innerHTML = `您确认要把名下${item.dataset.name},房产编号:
        <span>${item.dataset.bian}</span> 的房产下架停止出售吗？`;
        openMdl(ele.modal_shelf);
        ele.btn_que_xia.onclick = () => {
          dongJie(item.dataset.id);
        };
      };
    });
    // !剩余时间
    let time2All = document.querySelectorAll("#time2");
    time2All.forEach((item) => {
      let time2 = null;
      time2 = setInterval(() => {
        if (item.dataset.item * 1000 <= +new Date() || !item.dataset.time) {
          item.innerHTML = `已结束`;
          clearInterval(time2);
        } else {
          item.innerHTML = `${getCountTime(item.dataset.time)}`;
        }
      }, 1000);
    });
    // !这个是第三个tabBar的页面赋值---------------------------------------------------------
    let newList3 = list3
      .map((item, index) => {
        return `
        <div class="list_son">
        <div class="left">
          <div class="img">
            <img src="${IMG_DOMAIN + item.house_detail.logo}" alt="" />
          </div>
          <div class="cen">
            <p class="t">${item.house_detail.name}</p>
            <p>房产编号：${item.no}</p>
            <p>状态：冻结中</p>
          </div>
        </div>
        <div class="left_btn">
          <div class="t">剩余时间：<span data-time="${
            item.cold_time
          }" id="time3"></span></div>
          <!-- <div class="b">
            <div class="b_btn">
              <img src="http://img.qxgs.cc/tiantianlaishouzu/img/public/jinbi.png" alt="" /><span
                >5000</span
              >
            </div>
            <div>购买</div>
          </div> -->
          <div class="c" id="chexiao" data-time="${item.cold_time}" data-id="${
          item.id
        }">撤销冻结</div>
        </div>
      </div>`;
      })
      .join(" ");
    ele.lists3.innerHTML = newList3;
    if (list3.length == 0) {
      ele.lists3.innerHTML = `<div class="wen_wu">暂无房产出售<div/>`;
    }
    let chexiaoAll = document.querySelectorAll("#chexiao");
    chexiaoAll.forEach((item) => {
      item.onclick = () => {
        let time3 = null;
        time3 = setInterval(() => {
          if (item.dataset.item * 1000 <= +new Date() || !item.dataset.time) {
            ele.times.innerHTML = `已结束`;
            clearInterval(time3);
          } else {
            ele.times.innerHTML = `${getCountTime(item.dataset.time)}`;
          }
        }, 1000);
        openMdl(ele.modal_freeze);
        ele.btn_que_dong.onclick = () => {
          dongJie(item.dataset.id);
        };
      };
    });
    // !剩余时间
    let timeAll = document.querySelectorAll("#time3");
    timeAll.forEach((item) => {
      let time = null;
      time = setInterval(() => {
        if (item.dataset.item * 1000 <= +new Date() || !item.dataset.time) {
          item.innerHTML = `已结束`;
          clearInterval(time);
        } else {
          item.innerHTML = `${getCountTime(item.dataset.time)}`;
        }
      }, 1000);
    });
  }

  // !出售逻辑
  function sellAsync(id, money, ind) {
    let token = getCookie("token");
    ajax({
      method: "post",
      url: API_PATH.CHUSHOUS,
      header: {
        Authorization: token,
      },
      data: {
        id: id,
        num: money,
      },
      success: (res) => {
        openTips(res.msg);
        if (res.code == 1) {
          buNum = 100;
          asyncList();
          closeMdl(ele.modal_sell);
        }
      },
      error: (err) => {
        // openTips(err.msg);
      },
    });
  }
  // !冻结和取消逻辑
  function dongJie(id) {
    let token = getCookie("token");
    ajax({
      method: "post",
      url: API_PATH.CANAEL,
      header: {
        Authorization: token,
      },
      data: {
        id: id,
      },
      success: (res) => {
        openTips(res.msg);
        if (res.code == 1) {
          asyncList();
          closeMdl(ele.modal_shelf);
          closeMdl(ele.modal_freeze);
        }
      },
      error: (err) => {
        // openTips(err.msg);
      },
    });
  }
})();
